<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://g.alicdn.com/code/lib/twitter-bootstrap/4.2.1/css/bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
          crossorigin="anonymous">

    <script src="https://g.alicdn.com/code/lib/vue/2.6.4/vue.min.js"
            integrity="sha256-isEQDc5Dw7wea1s5iMZjBvPuYzjzMrvtlPwE6LtavFA=" crossorigin="anonymous"></script>
    <script src="https://g.alicdn.com/code/lib/axios/0.18.0/axios.min.js"></script>

    <title>Arthas Tutorials</title>

    <style>
        /* This is all that's required */
        .dropdown-item-checked::before {
            position: absolute;
            left: .4rem;
            content: '✓';
            font-weight: 600;
        }
    </style>
</head>

<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://g.alicdn.com/code/lib/jquery/3.3.1/jquery.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://g.alicdn.com/code/lib/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha512-5WvZa4N7Jq3TVNCp4rjcBMlc6pT3lZ7gVxjtI6IkKW+uItSa+rFgtFljvZnCxQGj8SUX5DHraKE6Mn/4smK1Cg=="
        crossorigin="anonymous"></script>
<script src="https://g.alicdn.com/code/lib/twitter-bootstrap/4.2.1/js/bootstrap.min.js"
        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>

<div id="app">

    <table class="table table-hover issue-tracker">
        <thead>
        <tr>
            <th>IP</th>
            <th>AgentId</th>
            <th>Version</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(agentInfo, agentId) in agentInfos">
            <td>
                <a class="btn btn-primary btn-xs"
                   v-bind:href="tunnelWebConsoleLink(agentId, agentInfo.clientConnectHost)">{{agentInfo.host}}</a>
            </td>
            <td>
                <span class="label label-default">{{agentId}}</span>
            </td>
            <td>
                <span class="label label-default">{{agentInfo.arthasVersion}}</span>
            </td>
        </tr>
        </tbody>
    </table>

</div>
</body>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            agentInfos: [],
        },
        methods: {
            fetchMyApps: function () {
                var vm = this;
                var params = new window.URLSearchParams(window.location.search);
                var appName = params.get('app');
                axios.get('/api/tunnelAgentInfo?app=' + appName)
                    .then(function (response) {
                        vm.agentInfos = response.data
                    })
                    .catch(function (error) {
                        console.log('api error ' + error)
                    })
            },
            tunnelWebConsoleLink: function (agentId, targetServer) {
                return "/?targetServer=" + targetServer + "&agentId=" + agentId;
            }
        },
        mounted: function () {
            this.fetchMyApps()
        }
    })

</script>
</html>